<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{title}}</title>

</head>
<body>
{{title}}
	<span id="output"></span>
    <script>
      (function(){
		var output = document.getElementById("output");
		var source = new EventSource("stream");
        source.onmessage=function(event) {
			output.textContent = event.data;
        }

        source.addEventListener("connect", function(event) {
			output.textContent = "Connected at: " + event.data;
        }, false);

        source.addEventListener("error", function(event) {
          if (event.target.readyState === EventSource.CLOSED) {
            source.close();
            output.textContent = "Connection closed!";
          } else if (event.target.readyState === EventSource.CONNECTING) {
            output.textContent = "Connection closed. Attempting to reconnect!";
          } else {
            output.textContent = "Connection closed. Unknown error!";
          }    
        }, false);
      })();
  </script>
</body>
</html>